import React from 'react';
import "antd/dist/antd.css";
import { List, Checkbox } from 'antd';

const list = ({ list, checkboxHandler, deleteTodoItem }) => {
    return (
        <List
            style={{width:'300px',marginTop:'10px'}}
            bordered
            dataSource={list}
            renderItem={(item,index) => (<List.Item style={{position:'relative'}}><Checkbox checked={item.isCompleted} onChange={e => checkboxHandler(index)} style={{marginRight:'10px'}}></Checkbox><div style={item.isCompleted ? {textDecoration:'line-through',color:'#ccc'} : {}}>{item.name}</div><div onClick={e => deleteTodoItem(index)} style={{position:'absolute',right:'10px',top:'50%',transform:'translateY(-50%)',cursor:'pointer',width:'20px',heigth:'20px',border:'1px solid #ccc',borderRadius:'50%',textAlign:'center',lineHeight:'20px'}}>X</div></List.Item>)}
        />
    )
}
export default list;